License Content
# ifdef-loader Webpack loader that allows JavaScript or TypeScript conditional compilation (`#if ... #elif ... #else ... #endif`) directly from Webpack. Conditional compilation directives are written inside `///` triple slash comment so that they don't effect normal JavaScript or TypeScript parsing. Example: ```js /// #if DEBUG console.log("there's a bug!"); /// #endif ``` The `DEBUG` or any other variable can be specified when configuring the Webpack loader (see below). The directive `#if` accepts any valid JavaScript expression: ```js /// #if PRODUCTION && version.charAt(0)=='X' console.log("Ho!"); /// #endif ``` If the expression is `true` the block of code between `#if` and `#endif` is included, otherwise is excluded by commenting it out. Additionally, `#elif` and `#else` clauses can be added to an `#if` clause: ```js /// #if env == 'PRODUCTION' console.log('Production!'); /// #elif env == 'DEBUG' console.log('Debug!'); /// #else console.log('Something else!'); /// #endif ``` The `#if` clauses can also be nested: ```js /// #if PRODUCTION /// #if OS=="android" android_code(); /// #elif OS=="ios" ios_code(); /// #endif /// #endif ``` ## Installation In webpack build directory: ``` npm install ifdef-loader --save-dev ``` ## Configuration Example of use with TypeScript files, enabling the `DEBUG` and `version` variables: In `webpack.config.json` put `ifdef-loader` after `ts-loader` so that files are processed before going into TypeScript compiler: ```js // define preprocessor variables const opts = { DEBUG: true, version: 3, "ifdef-verbose": true, // add this for verbose output "ifdef-triple-slash": false, // add this to use double slash comment instead of default triple slash "ifdef-fill-with-blanks": true // add this to remove code with blank spaces instead of "//" comments "ifdef-uncomment-prefix": "// #code " // add this to uncomment code starting with "// #code " }; /* ... */ { test: /\.tsx?$/, exclude: /node_modules/, use: [ { loader: "ts-loader" }, { loader: "ifdef-loader", options: opts } ] } // alternatively, options can be passed via query string: const q = require('querystring').encode(opts); /* ... */ { test: /\.tsx?$/, exclude: /node_modules/, loaders: [ "ts-loader", `ifdef-loader?${q}` ] } ``` in `example.ts`: ```ts /// #if DEBUG /* code to be included if DEBUG is defined */ /// #if version <2 /* code to be included if DEBUG is defined and version < 2*/ /// #endif /// #endif ``` ## Code in comments Often times writing `#if` ... `#else` ... `#endif` results in code that is not syntactically valid or does not pass the LINT check. A possible workaround is to hide such code in comments and let `ifdef-loader` uncomment it if it's part of the block that has to be included in the output. Example: The following code is invalid because the linter sees a double declaration of the `a` variable. ``` // #if DEBUG let a=1; // #else let a=2; // #endif ``` Using code in comments: ``` // #if DEBUG let a=1; // #else // #code let a=2; // #endif ``` The code is now under comment so it's ignored by the linter; but it's uncommented by `ifdef-loader` if the else branch has to be included in the output (that is when `DEBUG==false`). The `// #code ` string prefix can be changed and has to be explictly specified in the options object: ``` const opts = { // ... "ifdef-uncomment-prefix": "// #code ", // ... }; ``` ## License MIT ## Contributions Contributions in the form of issues or pull requests are welcome. ## Changes - v2.3.0 added option `uncomment-prefix` to write code in comments allowing it to pass through linters and syntax checking - v2.2.0 added option `fill-with-blanks` for removing code with blank spaces instead of `//` comments - v2.1.0 added support for `#elif` clause. - v2.0.0 BREAKING CHANGE: options are now passed using the standard Webpack API (`loader-utils`). See below for the upgrade. - v1.0.0 changed to triple slash comment syntax. Double slash syntax deprecated and available by turning off the `ifdef-triple-slash` option. - v1.0.3 fixed bug occurring with short lines. Improved handling of line termination (CRLF vs LF) in order to preserve source maps. - v1.1.0 added support for `#else` clauses. ## Upgrading from v1 to v2 In v2 options are passed differently than v1, so you need to update your `webpack.config.js`. Just do the following simple changes: ```js /* from */ const q = require('querystring').encode({json: JSON.stringify(opts)}); /* to */ const q = require('querystring').encode(opts); /* you can keep the ... `ifdef-loader?${q}` ... syntax */ /* but it's better to pass options directly (see the docs) */ ```